<template>
	<div>
		<div class="mb-8">
			Excel {{ $t('public.template') }}
			<el-button type="primary" size="small" class="ml-10" @click="download">
				<template #default>
					<span class="text-sm">{{ $t('public.download') }} Excel {{ $t('public.template') }}</span>
				</template>
			</el-button>
		</div>
		<div class="mb-8 w-full">
			{{ $t('public.upload') }} Excel
			<Upload :list="{ 'data': 'trade', 'list': false }" :classdiv="'inline-block ml-10'" :type="99" :name="'上传Excel文件'" :uptype="3" @exposeData="expose" />
			<div class="w-full text-center mt-4 text-xs">{{ $t('machine.temExcel') }}</div>
		</div>
		<div class="w-full text-center">
			<div class="inline-block">
				<el-button type="primary" size="small" @click="submit">
					<template #default>
						<span class="text-sm">{{ $t('public.save') }}</span>
					</template>
				</el-button>
				<el-button size="small" @click="cancell">
					<template #default>
						<span class="text-sm">{{ $t('public.cancel') }}</span>
					</template>
				</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Upload from '@/components/Upload/index.vue';
import { exportData } from "@/utils/excel";
import { importPickCode } from '@/api/machine_trade';

const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  },
  type: {
    type: String,
    required: true
  }
})

let emit = defineEmits(['exposeData'])



let data = reactive({
	file_path: '',
})

let download = () => {
	exportData('/uploads/excel/importCode.xlsx', '取货码配置模板', 2)
}

// 上传excel
let expose = (e) => {
	if (e.status == 200) {
		data.file_path = e.file.response.data
	} else {
		data.file_path = ''
	}
}

// 确认
let submit = () => {
	if (data.file_path == '') {
		ElMessage({
			message: $t('message.pleaseUptemplate'),
			type: 'error'
		})
	} else {
		ElMessage({
			message: $t('message.loading') + '...',
			type: 'success'
		})
		let params = {
			file_path: data.file_path,
			id: props.id,
			pick_type: props.type
		}
		importPickCode(params).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.loaded'),
					type: 'success'
				})
				emit('exposeData')
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		})
	}
}

// 取消
let cancell = () => {
	emit('exposeData')
}

</script>